import { connect } from "dva";
import { Popover } from "antd-mobile";
import styles from "./index.less";
import rightTriangle from "../../assets/icon3@3x.png";

const Item = Popover.Item;

function App({ commissionDetail, dispatch }) {
  const { text, list } = commissionDetail;
  return (
    <div className={styles.normal}>
      <div className={styles.tip}>
        <span>佣金类型</span>
        <Popover
          overlayClassName="fortest"
          overlayStyle={{ color: "currentColor" }}
          visible={false}
          overlay={[
            <Item key="4" value="4" style={{fontSize:"28px",
              color: "#FD5527",
              textAlign: "center",
              display: "flex",
              justifyContent: "center"}}>
              全部
            </Item>,
            <Item key="5" value="5" style={{ whiteSpace: "nowrap" }}>
              导购佣金
            </Item>,
            <Item key="6" value="6" style={{ whiteSpace: "nowrap" }}>
              推广佣金
            </Item>,
            <Item key="7" value="7" style={{ whiteSpace: "nowrap" }}>
              转化佣金
            </Item>,
            <Item key="8" value="8" style={{ whiteSpace: "nowrap" }}>
              引流佣金
            </Item>
          ]}
        >
          <div>
            <span>推广佣金</span>
            <img src={rightTriangle} className={styles.triangle} />
          </div>
        </Popover>
      </div>
      <div className={styles.masklayer} />
      {
        // <div className={styles.otherView}>
        //   <div className={styles.triangleTop}> </div>
        //   <div className={styles.inPage}>
        //     <span>全部</span>
        //   </div>
        //   <div className={styles.inPage}>
        //     <span>导购佣金</span>
        //   </div>
        //   <div className={styles.inPage}>
        //     <span>推广佣金</span>
        //   </div>
        //   <div className={styles.inPage}>
        //     <span>转化佣金</span>
        //   </div>
        //   <div className={styles.inPage}>
        //     <span>引流佣金</span>
        //   </div>
        // </div>
      }
      <div className={styles.tableDiv}>
        <table className={styles.tableItem}>
          <thead>
            <tr>
              <td>序号</td>
              <td>时间</td>
              <td>佣金类型</td>
              <td>导购订单</td>
              <td>金额</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>0809</td>
              <td>推广佣金</td>
              <td>12345</td>
              <td>100</td>
            </tr>
            <tr>
              <td>2</td>
              <td>0809</td>
              <td>推广佣金</td>
              <td>12345</td>
              <td>100</td>
            </tr>
            <tr>
              <td>3</td>
              <td>0809</td>
              <td>推广佣金</td>
              <td>12345</td>
              <td>100</td>
            </tr>
            <tr>
              <td>4</td>
              <td>0809</td>
              <td>推广佣金</td>
              <td>12345</td>
              <td>100</td>
            </tr>
            <tr>
              <td>5</td>
              <td>0809</td>
              <td>推广佣金</td>
              <td>12345</td>
              <td>100</td>
            </tr>
            <tr>
              <td>6</td>
              <td>0809</td>
              <td>推广佣金</td>
              <td>12345</td>
              <td>100</td>
            </tr>
            <tr>
              <td>7</td>
              <td>0809</td>
              <td>推广佣金</td>
              <td>12345</td>
              <td>100</td>
            </tr>
            <tr>
              <td>8</td>
              <td>0809</td>
              <td>推广佣金</td>
              <td>12345</td>
              <td>100</td>
            </tr>
            <tr>
              <td>9</td>
              <td>0809</td>
              <td>推广佣金</td>
              <td>12345</td>
              <td>100</td>
            </tr>
            <tr>
              <td>10</td>
              <td>0809</td>
              <td>推广佣金</td>
              <td>12345</td>
              <td>100</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}
export default connect(({ commissionDetail }) => ({ commissionDetail }))(App);
